div(
	layout="row"
	flex)

	div#middleButtons(layout-align="space-between" ng-if="vm.showButtons", layout="row")
		span.middleButtonHolder(layout-align="center center" ng-repeat="button in vm.bottomButtons", layout="column")
			md-button.md-fab.md-mini.md-icon-button.md-accent.md-ink-ripple.actionButton(
				style="background-color:{{button.background}}"
				ng-click="button.click(button)"
				aria-label="{{button.label}}")

				svg(ng-if="button.label === 'Extent'"
					width="24px" height="24px" viewBox="0 0 24 24")
					path(fill="#ffffff" ng-attr-d="{{vm.customIcons.extent}}")

				svg(ng-if="button.label === 'Show All'"
					width="24px" height="24px" viewBox="0 0 24 24")
					path(fill="#ffffff" ng-attr-d="{{vm.customIcons.showAll}}")

				svg(ng-if="button.label === 'Isolate'"
					width="24px" height="24px" viewBox="0 0 24 24")
					path(fill="#ffffff" ng-attr-d="{{vm.customIcons.isolate1}}")
					path(fill="#ffffff" ng-attr-d="{{vm.customIcons.isolate2}}")

				svg(ng-if="button.label === 'Hide'"
					width="24px" height="24px" viewBox="0 0 48 48")
					path(fill="none" ng-attr-d="{{vm.customIcons.hide1}}")
					path(fill="#fff" ng-attr-d="{{vm.customIcons.hide2}}")

				md-icon.angular-material-icons(ng-if="button.label === 'Focus'") fullscreen

				svg(ng-if="button.label === 'Clip'"
					xmlns="http://www.w3.org/2000/svg"
					width="48px" height="48px" viewBox="0 0 48 48")
					path#svg_1(stroke="rgba(0,0,0,0.01)" fill='none', ng-attr-d="{{vm.customIcons.clip1}}")
					path#svg_2(stroke="rgba(0,0,0,0.01)" fill="#fff" ng-attr-d="{{vm.customIcons.clip2}}")
					text#svg_3(stroke='#fff'
						fill="#fff"
						xml:space="preserve",
						font-family="Helvetica, Arial, sans-serif",
						font-size="10",
						ng-attr-stroke-width="0"
						x="25%" y="25%" dominant-baseline="middle" text-anchor="middle") {{button.numClips? button.numClips : ""}}

				// HELICOPTER
				svg(ng-if="vm.selectedMode === 'HELICOPTER' && button.isViewingOptionButton"
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 18 10.42")
					path(fill="#fff" ng-attr-d="{{vm.customIcons.helicopter}}")
				// TURNTABLE
				svg(ng-if="vm.selectedMode === 'TURNTABLE' && button.isViewingOptionButton"
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 23.94 22.46")
					path(fill="#fff" stroke="rgba(0,0,0,0.01)" ng-attr-d="{{vm.customIcons.turntable1}}")
					path(fill="#fff" stroke="rgba(0,0,0,0.01)" ng-attr-d="{{vm.customIcons.turntable2}}")
					path(fill="#fff" stroke="rgba(0,0,0,0.01)" ng-attr-d="{{vm.customIcons.turntable3}}")

			label(ng-if="!button.isViewingOptionButton") {{button.label}}

			label(ng-if="button.isViewingOptionButton") {{vm.navigationState.MODES[vm.selectedMode].label}}

			// CLIP OPTIONS
			.viewingOptionButtonHolder(layout-align="center center")
				.viewingOptionButtons(
					layout="column"
					ng-if="button.showPanel"
					layout-align="center center")

					md-button.md-fab.md-mini.md-icon-button.md-accent.md-ink-ripple.actionButton(
						ng-repeat="mode in button.modes"
						ng-click="mode.click();"
						aria-label="")

						svg(xmlns="http://www.w3.org/2000/svg"
							width="48px" height="48px" viewBox="0 0 48 48")
							path#svg_1(stroke="rgba(0,0,0,0.01)" fill='none', ng-attr-d="{{vm.customIcons.clip1}}")
							path#svg_2(stroke="rgba(0,0,0,0.01)" fill="#fff" ng-attr-d="{{vm.customIcons.clip2}}")
							text#svg_3(stroke='#fff'
								fill="#fff"
								xml:space="preserve",
								font-family="Helvetica, Arial, sans-serif",
								font-size="10",
								ng-attr-stroke-width="0"
								x="25%" y="25%" dominant-baseline="middle" text-anchor="middle") {{mode.text}}

						md-tooltip() {{mode.tooltip}}


			// NAVIGATION OPTIONS
			.viewingOptionButtonHolder(layout-align="center center")
				.viewingOptionButtons(
					layout="column"
					ng-if="vm.showNavigationState && button.isViewingOptionButton"
					layout-align="center center")

					md-button.md-fab.md-mini.md-icon-button.md-accent.md-ink-ripple.actionButton(
						style="background: #FF9800"
						ng-show="vm.selectedMode === vm.navigationState.MODES.HELICOPTER.mode"
						ng-repeat="(option, value) in vm.navigationState.SPEED"
						ng-click="value.fn()"
						aria-label="{{option}}")

							p(ng-if="option === 'INCREASE'" style="margin: 0") +
							md-tooltip(ng-if="option === 'INCREASE'" md-direction="right") {{value.label + ' Speed'}} to {{vm.navigationState.VALUE + 1}}

							p(ng-if="option === 'DECREASE'" style="margin: 0") -
							md-tooltip(ng-if="option === 'DECREASE'" md-direction="right") {{value.label + ' Speed'}} to {{vm.navigationState.VALUE - 1}}

							md-icon.angular-material-icons(ng-if="option === 'RESET'" style="margin: 0") replay
							md-tooltip(ng-if="option === 'RESET'" md-direction="right") {{value.label + ' Speed to 1'}}

					md-button.md-fab.md-mini.md-icon-button.md-accent.md-ink-ripple.actionButton(
						ng-repeat="(mode, value) in vm.navigationState.MODES"
						ng-if="mode !== vm.selectedMode"
						ng-click="vm.setNavigationMode(mode);"
						aria-label="{{mode}}")

						// HELICOPTER
						svg(ng-if="mode === 'HELICOPTER'"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 18 10.42")
							path(fill="#fff" ng-attr-d="{{vm.customIcons.helicopter}}")

						// TURNTABLE
						svg(ng-if="mode === 'TURNTABLE'"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 23.94 22.46")
							path(fill="#fff" stroke="rgba(0,0,0,0.01)" ng-attr-d="{{vm.customIcons.turntable1}}")
							path(fill="#fff" stroke="rgba(0,0,0,0.01)" ng-attr-d="{{vm.customIcons.turntable2}}")
